<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>错误单词测试选择</title>
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <script src="../js/vue.js"></script>
  <script src="../plugins/elementui/index.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
</head>
<body>

<div id="app">
  <!-- 导航栏 -->
  <el-menu class="el-menu-demo" mode="horizontal">
    <el-menu-item @click="navigateHome">首页</el-menu-item>
    <el-menu-item index="errorTest">错词测试</el-menu-item>
  </el-menu>

  <!-- 章节选择内容 -->
  <div style="padding: 20px;">
    <el-card class="box-card" v-for="(chapters, chapterGroup) in groupedChapters" :key="chapterGroup">
      <div slot="header">{{ chapterGroup }}</div>
      <el-button v-for="chapter in chapters" :key="chapter" @click="startErrorTest(chapter)" type="primary">
        {{ chapter }}
      </el-button>
    </el-card>
  </div>
</div>

<script>
  new Vue({
    el:'#app',
    data:{
      groupedChapters:{}
    },
    created(){
      this.fetchChapters();
    },
    methods:{
      navigateHome(){
        window.location.href = '../index.html';
      },
      fetchChapters(){
        axios.get('/errorWord/errorChapters').then(response=>{
          this.groupedChapters = response.data.data;
        }).catch(error => {
          console.error('获取错误单词章节失败',error);
        })
      },
      startErrorTest(chapter) {
        window.location.href = `error-test.html?chapter=${encodeURIComponent(chapter)}`;
      }
    }
  })

</script>


</body>
</html>